@@include('./modules/components/DocumentationPageHeader.html')
	<h1>Get Started</h1>
    <h2 id="quick-start">Quick start</h2>
    <p>The simplest way to get started is to add a copy of Fabric to your project.</p>
    <ol>
        <li>Download the source code zip file from the <a href="https://github.com/OfficeDev/Office-UI-Fabric/releases/latest">latest release on GitHub</a>.</li>
        <li>Unzip the file and copy the Fabric folder into your project.</li>
        <li>Add a reference to <code>fabric.css</code> in the <code>&lt;head&gt;</code> of your page. Make sure the path is correct.</li>
        <li>If you're using <a href="http://dev.office.com/fabric/components">components</a>, add a reference to <code>fabric.components.css</code> after the <code>fabric.css</code> reference.</li>
    </ol>

    <h3>Using Fabric icons and fonts</h3>
    <p>Now that your project references Fabric, you can apply <a href="/Typography">type styles</a> to any text element.</p>
    <pre><code class="hljs">&#x3C;span class=&#x22;ms-font-su ms-fontColor-themePrimary&#x22;&#x3E;Big blue text&#x3C;/span&#x3E;</code></pre>
    <p>To use icons, add an <code>&#x3C;i&#x3E;</code> element with the appropriate <a href="/Icons">icon classes</a>.</p>
    <pre><code class="hljs">&#x3C;i class=&#x22;ms-Icon ms-Icon--mail&#x22; aria-hidden=&#x22;true&#x22;&#x3E;&#x3C;/i&#x3E;</code></pre>
    <p>By default, icons inherit the text size and color of their parent. To override this, apply <a href="/Typography">type styles</a> directly to the icon.</p>
    <p aria-hidden="true">
         @@include('./modules/content/DownloadSVG.html')
    </p>

    <h3>Using components</h3>
    <p>To use Fabric components:</p>
    <ol>
        <li>Add <a href="http://dev.office.com/fabric/components">markup</a> to your pages using the appropriate classes.</li>
        <li>If the component requires JavaScript, you can use the sample JavaScript included in the <a href="https://github.com/OfficeDev/Office-UI-Fabric/releases/latest">latest release</a> on GitHub.</li>
        <li>Initialize the component JavaScript, and you’re all set! For an example that shows how to initialize the JavaScript, see the <a href="http://dev.office.com/fabric/components">components page</a>.</li>
    </ol>
    <p aria-hidden="true">
       @@include('./modules/content/ExampleUsageSVG.html')
    </p>
    <h2>Other ways to get Fabric</h2>
    <p>In addition to downloading a copy for your project, you can include Fabric via a CDN reference, by adding it through a package manager, or by building your own copy from the source code.</p>
    
    <h3 id="cdn">Reference the CDN</h3>
    <p>If you prefer to have your project's assets stored on an external server, Fabric is available from the apps for Office CDN. To use it, include the following references in the <code>&#x3C;head&#x3E;</code> of your page.</p>
    <pre><code class="hljs">&#x3C;link rel=&#x22;stylesheet&#x22; href=&#x22;https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css&#x22;&#x3E;
&#x3C;link rel=&#x22;stylesheet&#x22; href=&#x22;https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css&#x22;&#x3E;
</code></pre>
    <p>New versions of Fabric might not be available on the CDN right away. The following table lists the releases that are available now. To reference a specific version, update the version number in the URL to match the one you want.</p>
    <table class="docs-Table docs-Table--striped" style="width: 100%;">
        <tr>
            <th style="width: 80%;">Fabric Release</th>
            <th style="width: 20%;">Available on CDN</th>
        </tr>

        {{#each AvailableOnCDNModel.items}}
            {{> CDNRow this }}
        {{/each}}
    </table>

    <h3 id="package-managers">Package managers</h3>
    <p>Fabric is also available from a variety of package managers, including <a href="http://bower.io/">Bower</a>, <a href="https://www.npmjs.com/">npm</a>, and the <a href="https://www.nuget.org/">NuGet Package Manager</a>. You can quickly add Fabric as a package and stay up to date with the latest version.</p>

    <h4>Install with Bower</h4>
    <p>To install Fabric using Bower, run the following command:</p>
    <pre><code class="hljs">$ bower install office-ui-fabric</code></pre>

    <h4>Install with npm</h4>
    <p>To install Fabric using npm, run the following command:</p>
    <pre><code class="hljs">$ npm install office-ui-fabric</code></pre>

    <h4>Install with NuGet Package Manager</h4>
    <p>To install Fabric's NuGet package, run the following command in the <a href="http://docs.nuget.org/consume/package-manager-console">package manager console</a>:</p>
    <pre><code class="hljs">PM> Install-Package OfficeUIFabric</code></pre>
    
    <h3 id="build">Build from source</h3>
    <p>Fabric is easy to build and customize locally using gulp and a handful of tasks to watch and build specific parts of the toolkit. You can also use gulp to build and tweak demos and samples.</p>

    <p>For more information about how to build Fabric locally, including gulp tasks, check out <a href="https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/BUILDING.md">our instructions on GitHub</a>.</p>
@@include('./modules/components/DocumentationPageFooter.html')